<div class="container py-5">
  <div class="row">
    <div class="col-12 col-sm-12 col-md-12 col-lg-3 col-xl-3 text-center mb-2">
      <h1 class="h5">
        <i class="fas fa-laptop fa-lg me-2 text-primary"></i>
        {{ name }}<i class="fas fa-mobile-alt fa-lg ms-2 text-primary"></i>
      </h1>
    </div>
    <div class="col-12 col-sm-12 col-md-12 col-lg-3 col-xl-3 text-center text-danger mb-2">
      <h2 class="h5">
        {{ angular }}<i class="fab fa-angular fa-lg ms-2"></i>
      </h2>
    </div>
    <div class="col-12 col-sm-12 col-md-12 col-lg-3 col-xl-3 text-center text-primary mb-2">
      <h2 class="h5">
        {{ bootstrap }}<i class="fab fa-bootstrap fa-lg ms-2"></i>
      </h2>
    </div>
    <div class="col-12 col-sm-12 col-md-12 col-lg-3 col-xl-3 text-center text-success mb-2">
      <h2 class="h5">
        {{ fontawesome }}<i class="fab fa-font-awesome-flag fa-lg ms-2"></i>
      </h2>
    </div>
  </div>
  <hr>
  <div class="row mb-2">
    <div class="col-md-12 text-center">
      <h3 class="h5">Angular Examples<i class="fas fa-list ms-2"></i></h3>
    </div>
  </div>
  <div class="row g-4 py-2 row-cols-1 row-cols-md-2 row-cols-lg-5 text-center">
    <div class="col" *ngFor="let item of itemsExamples; let i=index">
      <div class="nga-card-step p-4 ">
        <a routerLink="{{ item.link }}">
          <i class="nga-text-primary {{ item.icon }} fa-3x mb-2"></i>
          <h3 class="h4 nga-text-primary fw-bold">{{ item.name }}</h3>
          <p class="h6 text-secondary">{{ item.description }}</p>
        </a>
      </div>
    </div>
  </div>
  <div class="row mb-2">
    <div class="col-md-12 text-center">
      <h3 class="h5">Angular Features<i class="fas fa-list ms-2"></i></h3>
    </div>
  </div>
  <div class="row g-4 py-2 row-cols-1 row-cols-md-2 row-cols-lg-5 text-center">
    <div class="col" *ngFor="let item of itemsFeatures; let i=index">
      <div class="nga-card-step p-4 ">
        <a routerLink="{{ item.link }}">
          <i class="nga-text-primary {{ item.icon }} fa-3x mb-2"></i>
          <h3 class="h4 nga-text-primary fw-bold">{{ item.name }}</h3>
          <p class="h6 text-secondary">{{ item.description }}</p>
        </a>
      </div>
    </div>
  </div>
</div>

